<template>
	<a-spin :spinning="loading">
		<a-card>
			<section slot="title">评论管理</section>
			<a-row :gutter="24">
				<a-col :span="6">
					<span class="label">评价人名称：</span>
					<a-input :max-length="100" allow-clear v-model="search_data.userNickname" placeholder="请输入" />
				</a-col>
				<a-col :span="6">
					<span class="label">评分星级：</span>
					<a-select v-model="search_data.scores" style="width: 100%;">
						<a-select-option :value="1">1分</a-select-option>
						<a-select-option :value="2">2分</a-select-option>
						<a-select-option :value="3">3分</a-select-option>
						<a-select-option :value="4">4分</a-select-option>
						<a-select-option :value="5">5分</a-select-option>
					</a-select>
				</a-col>
				<!-- <a-col :span="6">
					<span class="label">商家是否回复：</span>
					<a-select v-model="search_data.scores" style="width: 100%;">
						<a-select-option :value="1">1分</a-select-option>
						<a-select-option :value="2">2分</a-select-option>
						<a-select-option :value="3">3分</a-select-option>
						<a-select-option :value="4">4分</a-select-option>
						<a-select-option :value="5">5分</a-select-option>
					</a-select>
				</a-col> -->

				<a-col :span="6">
					<a-button class="ml-18" type="primary" @click="search">查询</a-button>
					<a-button class="mx-8" @click="reset">重置</a-button>
					<a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>
				</a-col>
			</a-row>
			<a-table class="mt-16 order-table" :columns="columns" :data-source="data" :scroll="scroll"
				:pagination="pagination">
				<template #skuPicUrl="skuPicUrl, data">
          <img :src='getPhotos(data.skuPicUrl)' style='width: 100px;height: 100px'/>
				</template>
				<template #action="action, data">
					<div class="flex items-center justify-between">
						<a-button @click="goCharts(data)" type="primary">
							回复
						</a-button>

						<a-button @click="delect(data.id,false)" class="ml-10 mr-10" type="danger" v-if='data.visible'>
              封禁
						</a-button>
            <a-button @click="delect(data.id,true)" class="ml-10 mr-10" v-else>
              解封
            </a-button>
<!--						<a-button type="danger">-->
<!--							封禁-->
<!--						</a-button>-->

					</div>
				</template>
			</a-table>
			<!-- <a-divider  /> -->
		</a-card>
		<create @upload="upload" ref="create"></create>
	</a-spin>
</template>
<script>
	import create from './components/create.vue'
  import {
    commentpage, commentvisible
  } from '@/api/index'
	import {
		tableMixins
	} from '@/utils/mixins'
	const search_data = {
		userNickname: '',
		scores: '',
		replyStatus: '',
		createTime: ''
	}
	export default {
		mixins: [tableMixins],
		components: {
			create
		},
		data() {
			return {
				search_data: {
					...search_data
				},
				loading: false,
				tabs: 'select1',
				orderId: undefined,
				ceartTime: [undefined, undefined],
				status: null,
				orderStatusEnums: [{
						value: 1,
						name: '成功'
					},
					{
						value: 2,
						name: '失败'
					}
				],
				data: [{
					id: 1111,
					travellerName: '武松',
					status: 1
				}],
				columns: [{
						title: '序号',
						dataIndex: 'id',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'id'
						}
					},
					{
						title: 'ID',
						dataIndex: 'id',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'id'
						}
					},
					{
						title: '用户名称',
						dataIndex: 'userNickname',
						width: 120,
						align: 'center',
						scopedSlots: {
							customRender: 'userNickname'
						}
					},
					{
						title: '商品名称',
						dataIndex: 'spuName',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'spuName'
						}
					},
          {
            title: '商品图片',
            dataIndex: 'skuPicUrl',
            align: 'center',
            width: 70,
            scopedSlots: {
              customRender: 'skuPicUrl'
            }
          },
					{
						title: '描述星级',
						dataIndex: 'descriptionScores',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'descriptionScores'
						}
					},
          {
            title: '服务星级',
            dataIndex: 'benefitScores',
            align: 'center',
            width: 70,
            scopedSlots: {
              customRender: 'benefitScores'
            }
          },
					{
						title: '评论内容',
						dataIndex: 'content',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'content'
						}
					},
					{
						title: '发布时间',
						dataIndex: 'createTime',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'createTime'
						}
					},

					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 160,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				]
			}
		},
		computed: {},
		watch: {},
		async created() {
			this.search()
		},
		methods: {
      getPhotos(img) {
        let list=img.split(',')
        return list[0]
      },
			search() {
				this.pageNum = 1
				this.getData()
			},
			upload() {
				this.search()
			},
			delect(id,type) {
				this.$confirm({
					title: '提示',
					content: `请确认是否操作该评论？`,
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk: () => {
						this.loading = true
            commentvisible({
								id,
              visible:type
							})
							.then(res => {
								this.$message.success('操作成功！')

								this.search()

								this.loading = false
							})
							.finally(() => (this.loading = false))
					}
				})
			},
			goCharts(data) {
				this.$refs.create.open(data)
			},
			getEdit(data) {
				this.$refs.create.open(data)
			},
			getSearchParams() {
				console.log(this.vendorId)
				return {
					pageNo: this.pageNum,
					pageSize: this.rowsNum,
					...this.search_data
				}
			},
			getData() {
				this.loading = true
				commentpage(this.getSearchParams())
					.then(data => {
						this.total = data.total
						this.data = data.list
					})
					.finally(() => (this.loading = false))
			},
			reset() {
				this.search_data = {
					...search_data
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.ant-col {
		margin-bottom: 20px;
		display: flex;
		align-items: center;

		.label {
			flex-shrink: 0;
			width: 100px;
			text-align: right;
			font-size: 14px;
			color: #595959;
		}

		.w-full {
			flex: 1;
		}
	}
</style>